import React from 'react'
import { Row, Col, Select, Spin, Checkbox } from 'antd'
import { messages } from "share/common";
import financeViewService from "./corporate-payment-report-view.service";
const Option = Select.Option;

class SelectBatchNumber extends React.Component {

  state = {
    existsExpenseReportBatchId: true,
    batchNumOptionsFetching: false,
    batchNumOptions: [],
    expenseReportBatchId: undefined
  };

  componentWillReceiveProps(nextProps) {
    if('value' in nextProps) {
      const value = nextProps.value;
      let existsExpenseReportBatchId, expenseReportBatchId;
      if(value) {
        existsExpenseReportBatchId = 'existsExpenseReportBatchId' in value ? value.existsExpenseReportBatchId : true;
        expenseReportBatchId = value.expenseReportBatchId
      } else {
        existsExpenseReportBatchId = true;
        expenseReportBatchId = undefined;
      }
      this.setState({
        existsExpenseReportBatchId,
        expenseReportBatchId
      });
    }
  }

  onChange = value => {
    const { onChange } = this.props;
    const { existsExpenseReportBatchId, expenseReportBatchId } = value;
    onChange && onChange(existsExpenseReportBatchId && !expenseReportBatchId ? undefined : value);
  };

  dispatchOnChange = () => {
    const { existsExpenseReportBatchId, expenseReportBatchId } = this.state;
    this.onChange({
      existsExpenseReportBatchId,
      expenseReportBatchId
    });
  };

  onChangeValue = (value, attr) => {
    this.setState({ [attr]: value }, this.dispatchOnChange);
  };

  //获取批次号options
  getBatchNumOptions = (key) => {
    const { entityType } = this.props;
    if (key.length >= 4 && key.length <= 17) {
      this.setState({ batchNumOptionsFetching: true });
      financeViewService[entityType === '3001' ? 'getLoanBatchNumberList' : 'getBatchNumList'](key).then(res => {
        this.setState({
          batchNumOptionsFetching: false,
          batchNumOptions: res.data || []
        })
      }).catch(() => {
        this.setState({
          batchNumOptionsFetching: false,
          batchNumOptions: []
        })
      })
    }
  };

  onChangeCheckbox = existsExpenseReportBatchId => {
    this.setState({
      existsExpenseReportBatchId,
      expenseReportBatchId: null
    }, this.dispatchOnChange)
  };

  render() {
    const { batchNumOptions, batchNumOptionsFetching, existsExpenseReportBatchId, expenseReportBatchId } = this.state;
    return (
      <Row>
        <Col span={16}>
          <Select
            style={{ width: '100%' }}
            showSearch
            allowClear
            placeholder={messages('expense-1.key661')/*请输入四位以上*/}
            notFoundContent={batchNumOptionsFetching ? <Spin size="small"/> : messages('common.unmatched')/*无匹配结果*/}
            disabled={!existsExpenseReportBatchId}
            value={expenseReportBatchId}
            onSearch={this.getBatchNumOptions}
            onSelect={value => this.onChangeValue(value, 'expenseReportBatchId')}
            onChange={value => !value && this.onChangeValue(undefined, 'expenseReportBatchId')}
          >
            {batchNumOptions.map(option => <Option key={option}>{option}</Option>)}
          </Select>
        </Col>
        <Col span={7} offset={1} className="null-batch-num">
          <Checkbox onChange={e => this.onChangeCheckbox(!e.target.checked)}/>
          &nbsp;{messages('expense-1.key602')/*为空*/}
        </Col>
      </Row>
    )
  }

}

export default SelectBatchNumber
